<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 搜索和添加两个模块 -->
        <div class="header">
          <!-- 添加页面按钮 -->
          <el-button
            v-if="assignPerm('add-but')"
            type="primary"
            @click.native="addFn"
            >添加页面</el-button
          >
          <!-- 搜索框 -->

          <div style="width: 500px" class="searchP">
            <el-input
              v-model="search"
              placeholder="请输入内容"
              class="input-with-select"
              @keydown.enter.native="searchFn"
            >
              <el-button slot="append" @click="searchFn">筛选</el-button>
            </el-input>
            <el-button
              type="primary"
              style="width: 150px"
              @click.native="closeFunc"
              >重置</el-button
            >
          </div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="title" label="标题" width="380" />
          <el-table-column prop="content" label="内容" width="380" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                v-if="assignPerm('edit-but')"
                size="mini"
                @click="ToeditPage(row.id)"
                >编辑</el-button
              >
              <el-button
                v-if="assignPerm('dele-but')"
                size="mini"
                type="danger"
                @click="handleDelete(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页符 -->
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 100, 200, 300, 400]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="changePage"
          />
        </div>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      :title="form.id ? '编辑页面' : '新增页面'"
      :visible="dialogFormVisible"
      @close="closeFn"
    >
      <!-- 表单 -->

      <el-form
        ref="pageList"
        :model="form"
        :rules="rules"
        style="margin-bottom: 5px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>

        <el-form-item label="内容" prop="content" />
        <vue-editor
          ref="EditorRef"
          v-model="form.content"
          @blur="EditorBlurFn"
        />
        <div slot="footer" class="dialog-footer" />
      </el-form>

      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="submitFn">确 定</el-button>
      <!-- 做到双向绑定了 -->
    </el-dialog>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import {
  limitList,
  pageCount,
  editPages,
  delPages,
  addPages,
  getpagesById,
} from "@/api/pages";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      total: 0,
      limit: 10,
      page: 1,
      search: "",
      form: {
        title: "",
        content: "",
      },
      // 表单效验
      rules: {
        title: [{ required: true, triggle: "blur", message: "标题不能为空" }],
        content: [{ required: true, message: "内容不能为空" }],
      },
    };
  },
  // 进入页面就可以看到数据
  async created() {
    this.changePage(this.page);
    this.closeFun();
  },
  methods: {
    closeFunc() {
      this.search = "";
      this.closeFun();
    },
    // 副文本编辑器校验函数
    EditorBlurFn() {
      this.$refs.form.validateField("content");
    },
    // 查看全部的页面列表
    async closeFun() {
      // 列表重新展示
      const start = Number(this.limit) * (Number(this.page) - 1);
      this.tableData = await limitList({
        _limit: this.limit,
        _start: start,
        title_contains: this.search,
      });
      // console.log(this.tableData);
      // const res = this.tableData;
      this.tableData.forEach((item) => {
        item.content = item.content.replace(/<\/?.+?>/g, "");
      });
      console.log(this.tableData, 152);
      // total是总数
      this.total = await pageCount({ title_contains: this.search });
    },
    // 分页器页码发生改变时触发的函数
    async changePage(page) {
      // page: 表示获取到当前点击的页码数
      this.page = page;
      // 调用页面数量函数
      this.closeFun();
      this.total = await pageCount();
    },
    // 搜索
    async searchFn() {
      // 获取展示的列表
      this.tableData = await limitList({ title_contains: this.search });
      //  改变total
      this.total = await pageCount({ title_contains: this.search });
      //  清空搜索框
      // this.search = "";
    },
    // 删除
    async handleDelete(id) {
      this.$confirm("是否执行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delPages(id);
          this.$message.success("删除成功");
          if (this.total - (this.page - 1) * this.limit === 1) {
            this.page--;
          }
          this.closeFun();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增页面点击事件
    addFn() {
      this.dialogFormVisible = true;
    },
    // 编辑信息事件
    async ToeditPage(id) {
      this.dialogFormVisible = true;
      this.form = await getpagesById(id);
    },
    // 确定提交按钮事件
    async submitFn() {
      if (this.form.id) {
        await editPages(this.form);
        this.$message.success("编辑成功!");
      } else {
        // 调用新增函数
        await addPages(this.form);
        this.$message.success("添加成功");
      }
      this.closeFun();
      // 清空数据
      this.closeFn();
    },
    // 关闭弹窗
    closeFn() {
      this.dialogFormVisible = false;
      this.form = {
        title: "",
        content: "",
      };
      this.$refs.pageList.resetFields();

      //  弹出输入框
      this.dialogvisible = true;
      // 调用获取对应页面详情的函数
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  .searchP {
    display: flex;
    justify-content: space-between;
  }
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
